<template>
  <div>
    <div class="banner">
      <div class="banner_tittle">
        <span class="banner_tittle_tt">清凉一下</span>
        青城山门票购买
        <span class="banner_tittle_tt">避暑圣地</span>
      </div>
      <div class="banner_card">
        <el-card style="width: 30%; margin: 50px auto">
          <h1>当前票价</h1>
          <div v-for="item in piaoList" :key="item" class="banner_box">
            <div class="left">
              <h3>{{ item.name }}</h3>
              <div>{{ item.msg }}</div>
            </div>
            <div class="right">
              <div class="price">{{ item.price }}</div>
              <div>{{ item.num }}</div>
            </div>
          </div>
        </el-card>
        <el-card style="width: 60%; margin: 50px auto">
          <h1 style="padding: 10px; margin-bottom: 10px">填写游客相关信息</h1>
          <el-form
            style="width: 100%"
            :model="sizeForm"
            label-width="auto"
            :label-position="labelPosition"
            :size="size"
          >
            <el-form-item label="姓名">
              <el-input v-model="sizeForm.name" />
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="sizeForm.phone" />
            </el-form-item>
            <el-form-item label="门票类型">
              <el-select v-model="sizeForm.region" placeholder="请选择门票类型">
                <el-option label="儿童票" value="erTong" />
                <el-option label="成人票" value="ChenRen" />
                <el-option label="老年票" value="old" />
              </el-select>
            </el-form-item>
            <el-form-item label="选择日期">
              <el-col :span="11">
                <el-date-picker
                  v-model="sizeForm.date1"
                  type="date"
                  aria-label="选择日期"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-col>
              <el-col class="text-center" :span="1" style="margin: 0 0.5rem"
                >-</el-col
              >
              <el-col :span="11">
                <el-date-picker
                  v-model="sizeForm.date2"
                  type="date"
                  aria-label="选择日期"
                  placeholder="选择日期"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>
            <el-form-item>
              <div style="margin: 0 auto">
                <el-button type="primary" plain @click="dialogVisible = true"
                  >确定订单</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <div
        style="
          width: 74%;
          margin: 0 auto;
          background-color: #fff;
          border-radius: 20px;
          overflow: hidden;
          padding: 20px;
        "
      >
        <h2 style="padding: 20px">订单详情</h2>
        <el-table :data="filterTableData">
          <el-table-column label="订单时间" prop="date" />
          <el-table-column label="订单人" prop="name" />
          <el-table-column label="订单类型" prop="type" />
          <el-table-column label="联系电话" prop="phone" />
          <el-table-column align="right">
            <template #default="">
              <el-button size="small" @click="editDialogVisible = true">
                编辑
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="deleteDialogVisible = true"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" :total="50" />
      </div>
    </div>

    <!-- 确定弹窗 -->
    <el-dialog v-model="dialogVisible" title="提示" width="500">
      <span>是否确认当前订单</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑提示" width="500">
      <div>
        <el-form
          :label-position="labelPosition"
          label-width="auto"
          :model="formLabelAlign"
          style="max-width: 600px"
        >
          <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.name" />
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="sizeForm.region" placeholder="请选择门票类型">
              <el-option label="儿童票" value="erTong" />
              <el-option label="成人票" value="ChenRen" />
              <el-option label="老年票" value="old" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="formLabelAlign.type" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="editDialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除弹窗 -->
    <el-dialog v-model="deleteDialogVisible" title="删除提示" width="500">
      <span>是否确认删除当前订单</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="deleteDialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="js" setup>
import { reactive, ref, computed } from 'vue'

const size = ref('default')
const labelPosition = ref('right')

const sizeForm = reactive({
  name: '',
  phone: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const piaoList = reactive([
  {
    name: '儿童票',
    price: '20元',
    num: '20张',
    msg: '1.5米以下的儿童使用'
  },
  {
    name: '成人票',
    price: '30元',
    num: '20张',
    msg: '1.5米以下的儿童使用'
  },
  {
    name: '老年票',
    price: '5元',
    num: '20张',
    msg: '1.5米以下的儿童使用'
  },
])

const dialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const editDialogVisible =ref(false)


const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)



const tableData = [
  {
    date: '2024-05-20',
    name: '张三',
    type: '儿童票',
    phone: '13xxxxx2061',
  },
  {
    date: '2024-05-19',
    name: '李四',
    type: '儿童票',
    phone: '13xxxxx2061',
  },
  {
    date: '2024-05-15',
    name: '王五',
    type: '儿童票、成人票',
    phone: '13xxxxx2061',
  },
  {
    date: '2024-05-13',
    name: '富贵',
    type: '儿童票、成人票、老年票',
    phone: '13xxxxx2061',
  },
  {
    date: '2024-05-09',
    name: '旺财',
    type: '成人票',
    phone: '13xxxxx2061',
  },
  {
    date: '2024-05-06',
    name: '大顺',
    type: '成人票',
    phone: '13xxxxx2061',
  },
  {
    date: '2024-05-04',
    name: '贵子',
    type: '儿童票',
    phone: '13xxxxx2061',
  },
  {
    date: '2024-05-03',
    name: '老王',
    type: '成人票、老年票',
    phone: '13xxxxx2061',
  },
]
const formLabelAlign = reactive({
  name: '',
  region: '',
  type: '',
})

</script>

<style lang="less" scoped>
.banner {
  // height: 1200px;
  padding-bottom: 50px;
  background: url("../../assets/订单/背景22.png") no-repeat;
  background-size: cover;
}
.banner_tittle {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  padding-top: 200px;
  font-size: 65px;
  font-weight: 800;
  .banner_tittle_tt {
    font-size: 25px;
    font-weight: 500;
    color: #dddddd;
  }
}

.banner_card {
  width: 80%;
  color: #fff;
  margin: 0 auto;
  display: flex;
  .banner_box {
    width: 96%;
    // background-color:red;
    margin: 10px 0px;
    display: flex;
    justify-content: space-between;
    border: 1px solid rgb(196, 196, 196);
    border-radius: 10px;
    padding: 10px;

    .right {
      .price {
        color: #f38b1b;
        font-weight: 600;
        font-size: 18px;
      }
    }
  }

  .el-radio-group {
    margin-right: 12px;
  }

  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>